<template>
	<view>
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="item" @click="toDetail(index)">
				<text class="num">{{index<9?'0':''}}{{index+1}}</text>
				<view class="item_title">{{item.title}}</view>
				<view class="item_icon">
					<u-icon v-if="list_show==index" name="arrow-up" :size="28" color="#ddd"></u-icon>
					<u-icon v-else name="arrow-down" :size="28" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item_detail" v-if="list_show==index">
				<u-parse :html="item.content"></u-parse>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				list_show:0
			}
		},
		onLoad(p) {
			if(p.list_show){
				this.list_show = p.list_show;
			}
			this.getList();
			
		},
		onReachBottom() {
			this.getListS();
		},
		methods: {
			getList(){
				this.$show();
                uni.request({
                    url:'https://oa.yuxiang123.cn/api/shop/question',
                    method:'POST',
                    header:{"content-type":"application/x-www-form-urlencoded"},
                    data:{
                        page:this.page,
					    pagesize:'20'
                    },
                    success: (res) => {
                        this.$hide()
                        if(res.data.code == 1){
                            this.list = res.data.data;
                        }
                    }
                })
			},
			getListS(){
				if(this.page * 20 > this.list.length){
					return
				}
				this.page ++;
				this.$show();
                uni.request({
                    url:'https://oa.yuxiang123.cn/api/shop/question',
                    method:'POST',
                    header:{"content-type":"application/x-www-form-urlencoded"},
                    data:{
                        page:this.page,
					    pagesize:'20'
                    },
                    success: (res) => {
                        this.$hide()
                        if(res.data.code == 1){
                            this.list = this.list.concat(res.data.data);
                        }
                    }
                })
			},
			toDetail(index){
				if(this.list_show==index){
					this.list_show=-1;					
				}else{
					this.list_show=index;					
				}
			}
		}
	}
</script>

<style lang="scss">
.list{
	padding: 0 20upx;
	.item{
		display: flex;
		align-items: center;
		line-height: 90upx;
		padding:20rpx 0;
		.num{height:60rpx;line-height: 60rpx;margin:15rpx 15rpx 15rpx 0;background-color:#3662EC;color:#fff;font-size:32rpx;font-weight: bolder;padding:10rpx 20rpx;}
		.item_title{
			flex: 1;
			font-size: 32upx;
			font-weight:bolder;
		}
	}
	.item_detail{width:80%;padding:40rpx 5%;margin:0 7% 20rpx 7%; font-size:28rpx;background-color: #f0f0f0;color:#777;}
}
</style>
